<template>
  <view class="feedback-page">
    <view class="header">
      <view class="back-btn" @tap="goBack">
        <text class="back-icon">&lt;</text>
      </view>
      <text class="page-title">我的反馈</text>
    </view>
    
    <view class="feedback-container">
      <!-- 新建反馈按钮 -->
      <view class="new-feedback" @tap="createFeedback">
        <text class="icon">+</text>
        <text class="text">提交新反馈</text>
      </view>
      
      <!-- 无反馈时显示 -->
      <view class="empty-container" v-if="feedbacks.length === 0">
        <view class="empty-image">
          <text class="empty-icon iconfont">&#xe67c;</text>
        </view>
        <text class="empty-text">您还没有提交过反馈</text>
        <text class="empty-desc">我们非常重视您的意见和建议，欢迎您提出宝贵的反馈</text>
      </view>
      
      <!-- 反馈列表 -->
      <view class="feedback-list" v-else>
        <view v-for="(item, index) in feedbacks" :key="index" class="feedback-item" :class="{ 'open': item.isOpen }">
          <!-- 反馈头部 -->
          <view class="item-header" @tap="toggleItem(index)">
            <view class="header-left">
              <text class="feedback-type" :class="'type-' + item.type">{{ getFeedbackType(item.type) }}</text>
              <text class="feedback-title">{{ item.title }}</text>
            </view>
            <view class="header-right">
              <text :class="['feedback-status', 'status-' + item.status]">{{ getFeedbackStatus(item.status) }}</text>
              <text class="toggle-icon">{{ item.isOpen ? '∧' : '∨' }}</text>
            </view>
          </view>
          
          <!-- 反馈内容 -->
          <view class="item-content" v-if="item.isOpen">
            <text class="content-time">提交时间：{{ item.time }}</text>
            
            <view class="feedback-main">
              <text class="feedback-text">{{ item.content }}</text>
              <view class="feedback-images" v-if="item.images && item.images.length > 0">
                <view 
                  v-for="(image, imgIndex) in item.images" 
                  :key="imgIndex" 
                  class="image-item"
                  @tap="previewImage(item.images, imgIndex)"
                >
                  <text class="placeholder-icon iconfont">&#xe67f;</text>
                </view>
              </view>
            </view>
            
            <!-- 回复列表 -->
            <view class="replies" v-if="item.replies && item.replies.length > 0">
              <view class="reply-title">回复记录</view>
              <view v-for="(reply, rIndex) in item.replies" :key="rIndex" class="reply-item">
                <view class="reply-header">
                  <text class="reply-name">{{ reply.name }}</text>
                  <text class="reply-time">{{ reply.time }}</text>
                </view>
                <text class="reply-content">{{ reply.content }}</text>
              </view>
            </view>
            
            <!-- 反馈操作 -->
            <view class="feedback-actions" v-if="item.status !== 'closed'">
              <view class="action-btn" @tap="closeFeedback(index)">
                <text>关闭反馈</text>
              </view>
            </view>
          </view>
        </view>
        
        <!-- 加载更多 -->
        <view class="load-more" v-if="!loadAll" @tap="loadMoreFeedbacks">
          <text class="load-text">加载更多</text>
        </view>
        <view class="load-all" v-else>
          <text>— 已加载全部反馈 —</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue';

// 反馈列表
const feedbacks = ref([]);
// 分页
const page = ref(1);
// 是否加载全部
const loadAll = ref(false);

// 页面加载时执行
onMounted(() => {
  loadFeedbacks();
});

// 加载反馈数据
const loadFeedbacks = () => {
  // 模拟API请求
  setTimeout(() => {
    // 模拟数据
    const newFeedbacks = [
      {
        id: 1,
        type: 'suggestion',
        title: '关于养老院膳食安排的建议',
        content: '希望养老院能提供更多样化的餐饮选择，特别是对于有特殊饮食需求的老人，可以提供针对性的定制餐饮方案。同时建议增加营养师的定期指导，确保老人饮食健康均衡。',
        status: 'replied',
        time: '2023-10-15 14:30',
        images: ['img1', 'img2'],
        isOpen: false,
        replies: [
          {
            id: 101,
            name: '客服小李',
            content: '感谢您的宝贵建议！我们已将您的意见转达给相关部门，预计将在下个月推出更丰富的餐饮方案，并计划引入专业营养师团队提供定期指导服务。',
            time: '2023-10-16 09:15'
          }
        ]
      },
      {
        id: 2,
        type: 'complaint',
        title: '系统预约功能不稳定',
        content: '在使用系统预约功能时，多次遇到提交后显示成功但实际预约记录不存在的情况，希望能尽快修复。',
        status: 'processing',
        time: '2023-10-10 16:45',
        images: [],
        isOpen: false,
        replies: [
          {
            id: 201,
            name: '技术支持',
            content: '非常抱歉给您带来不便。我们已经收到您的反馈并正在排查问题，预计将在2个工作日内修复。请问您方便提供一下使用的设备型号和系统版本吗？这将有助于我们更快定位问题。',
            time: '2023-10-11 10:30'
          }
        ]
      },
      {
        id: 3,
        type: 'question',
        title: '如何修改已提交的预约信息',
        content: '我刚才提交了一个养老院参观预约，但填错了日期，请问如何修改已提交的预约信息？',
        status: 'closed',
        time: '2023-09-28 09:20',
        images: [],
        isOpen: false,
        replies: [
          {
            id: 301,
            name: '客服小王',
            content: '您好！已提交的预约暂不支持直接修改，您可以取消当前预约后重新提交。取消预约路径：个人中心 > 养老院预约记录 > 找到对应预约 > 点击"取消预约"按钮。如有其他问题，欢迎随时咨询。',
            time: '2023-09-28 09:35'
          }
        ]
      }
    ];
    
    if (page.value === 1) {
      feedbacks.value = newFeedbacks;
    } else {
      feedbacks.value = [...feedbacks.value, ...newFeedbacks];
    }
    
    // 判断是否加载全部
    if (page.value >= 2) {
      loadAll.value = true;
    }
  }, 500);
};

// 加载更多反馈
const loadMoreFeedbacks = () => {
  if (loadAll.value) return;
  
  page.value++;
  loadFeedbacks();
};

// 切换展开/折叠反馈
const toggleItem = (index) => {
  feedbacks.value[index].isOpen = !feedbacks.value[index].isOpen;
};

// 创建新反馈
const createFeedback = () => {
  uni.navigateTo({
    url: '/pages/profile/feedback/create'
  });
};

// 关闭反馈
const closeFeedback = (index) => {
  uni.showModal({
    title: '提示',
    content: '确定要关闭这条反馈吗？关闭后将不能继续追加反馈。',
    success: (res) => {
      if (res.confirm) {
        // 这里应该调用API关闭反馈
        feedbacks.value[index].status = 'closed';
        
        uni.showToast({
          title: '反馈已关闭',
          icon: 'success'
        });
      }
    }
  });
};

// 预览图片
const previewImage = (images, current) => {
  // 模拟图片预览
  uni.showToast({
    title: `预览第${current + 1}张图片`,
    icon: 'none'
  });
  
  // 实际应用中应使用uni.previewImage
  // uni.previewImage({
  //   urls: images,
  //   current: current
  // });
};

// 获取反馈类型文本
const getFeedbackType = (type) => {
  const typeMap = {
    'suggestion': '建议',
    'complaint': '投诉',
    'question': '咨询',
    'praise': '表扬'
  };
  
  return typeMap[type] || '其他';
};

// 获取反馈状态文本
const getFeedbackStatus = (status) => {
  const statusMap = {
    'pending': '待处理',
    'processing': '处理中',
    'replied': '已回复',
    'closed': '已关闭'
  };
  
  return statusMap[status] || '未知';
};

// 返回上一页
const goBack = () => {
  uni.navigateBack({
    delta: 1
  });
};
</script>

<style lang="scss">
page {
  background-color: #f5f5f5;
  min-height: 100%;
}

.feedback-page {
  min-height: 100vh;
  padding-bottom: 50px; /* 为tabBar预留空间 */
  
  .header {
    position: relative;
    padding: 15px;
    background-color: #fff;
    border-bottom: 1px solid rgba(120, 194, 173, 0.1);
    display: flex;
    justify-content: center;
    align-items: center;
    
    .back-btn {
      position: absolute;
      left: 15px;
      top: 50%;
      transform: translateY(-50%);
      width: 30px;
      height: 30px;
      display: flex;
      justify-content: center;
      align-items: center;
      
      .back-icon {
        font-size: 20px;
        font-weight: bold;
        color: #38a688;
      }
    }
    
    .page-title {
      font-size: 18px;
      font-weight: 600;
      color: #38a688;
    }
  }
  
  .feedback-container {
    padding: 15px;
    
    // 新建反馈按钮
    .new-feedback {
      display: flex;
      align-items: center;
      justify-content: center;
      background: linear-gradient(135deg, #78c2ad, #38a688);
      border-radius: 12px;
      padding: 15px;
      margin-bottom: 15px;
      box-shadow: 0 4px 10px rgba(56, 166, 136, 0.2);
      
      .icon {
        font-size: 20px;
        font-weight: bold;
        color: #fff;
        margin-right: 8px;
      }
      
      .text {
        font-size: 16px;
        font-weight: 500;
        color: #fff;
      }
    }
    
    // 无反馈时显示
    .empty-container {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 50px 0;
      
      .empty-image {
        width: 80px;
        height: 80px;
        border-radius: 40px;
        background-color: rgba(56, 166, 136, 0.1);
        display: flex;
        justify-content: center;
        align-items: center;
        margin-bottom: 15px;
        
        .empty-icon {
          font-size: 40px;
          color: #38a688;
        }
      }
      
      .empty-text {
        font-size: 16px;
        font-weight: 500;
        color: #5d4037;
        margin-bottom: 10px;
      }
      
      .empty-desc {
        font-size: 14px;
        color: #8d6e63;
        text-align: center;
        padding: 0 30px;
        line-height: 1.5;
      }
    }
    
    // 反馈列表
    .feedback-list {
      .feedback-item {
        background-color: #fff;
        border-radius: 12px;
        margin-bottom: 15px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
        overflow: hidden;
        transition: all 0.3s;
        
        &.open {
          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
        }
        
        // 反馈头部
        .item-header {
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 15px;
          border-bottom: 1px solid rgba(141, 110, 99, 0.1);
          
          .header-left {
            display: flex;
            align-items: center;
            flex: 1;
            overflow: hidden;
            
            .feedback-type {
              font-size: 12px;
              padding: 2px 6px;
              border-radius: 10px;
              margin-right: 8px;
              white-space: nowrap;
              
              &.type-suggestion {
                background-color: rgba(33, 150, 243, 0.1);
                color: #2196f3;
              }
              
              &.type-complaint {
                background-color: rgba(244, 67, 54, 0.1);
                color: #f44336;
              }
              
              &.type-question {
                background-color: rgba(255, 152, 0, 0.1);
                color: #ff9800;
              }
              
              &.type-praise {
                background-color: rgba(76, 175, 80, 0.1);
                color: #4caf50;
              }
            }
            
            .feedback-title {
              font-size: 15px;
              font-weight: 500;
              color: #5d4037;
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
            }
          }
          
          .header-right {
            display: flex;
            align-items: center;
            margin-left: 10px;
            
            .feedback-status {
              font-size: 12px;
              padding: 2px 6px;
              border-radius: 10px;
              margin-right: 8px;
              
              &.status-pending {
                background-color: rgba(117, 117, 117, 0.1);
                color: #757575;
              }
              
              &.status-processing {
                background-color: rgba(255, 152, 0, 0.1);
                color: #ff9800;
              }
              
              &.status-replied {
                background-color: rgba(33, 150, 243, 0.1);
                color: #2196f3;
              }
              
              &.status-closed {
                background-color: rgba(117, 117, 117, 0.1);
                color: #757575;
              }
            }
            
            .toggle-icon {
              font-size: 16px;
              color: #bcaaa4;
            }
          }
        }
        
        // 反馈内容
        .item-content {
          padding: 15px;
          
          .content-time {
            font-size: 12px;
            color: #bcaaa4;
            margin-bottom: 10px;
            display: block;
          }
          
          .feedback-main {
            margin-bottom: 15px;
            
            .feedback-text {
              font-size: 14px;
              color: #5d4037;
              line-height: 1.6;
              margin-bottom: 10px;
              display: block;
            }
            
            .feedback-images {
              display: flex;
              flex-wrap: wrap;
              margin: 0 -5px;
              
              .image-item {
                width: calc(33.33% - 10px);
                height: 80px;
                margin: 5px;
                border-radius: 8px;
                background-color: rgba(141, 110, 99, 0.05);
                display: flex;
                justify-content: center;
                align-items: center;
                overflow: hidden;
                
                .placeholder-icon {
                  font-size: 24px;
                  color: #bcaaa4;
                }
              }
            }
          }
          
          // 回复区域
          .replies {
            background-color: rgba(56, 166, 136, 0.05);
            border-radius: 8px;
            padding: 12px;
            margin-bottom: 15px;
            
            .reply-title {
              font-size: 14px;
              font-weight: 500;
              color: #38a688;
              margin-bottom: 10px;
            }
            
            .reply-item {
              margin-bottom: 10px;
              padding-bottom: 10px;
              border-bottom: 1px dashed rgba(56, 166, 136, 0.1);
              
              &:last-child {
                margin-bottom: 0;
                padding-bottom: 0;
                border-bottom: none;
              }
              
              .reply-header {
                display: flex;
                justify-content: space-between;
                align-items: center;
                margin-bottom: 5px;
                
                .reply-name {
                  font-size: 13px;
                  font-weight: 500;
                  color: #38a688;
                }
                
                .reply-time {
                  font-size: 12px;
                  color: #bcaaa4;
                }
              }
              
              .reply-content {
                font-size: 13px;
                color: #5d4037;
                line-height: 1.5;
              }
            }
          }
          
          // 反馈操作
          .feedback-actions {
            display: flex;
            
            .action-btn {
              padding: 8px 15px;
              border: 1px solid rgba(56, 166, 136, 0.3);
              border-radius: 20px;
              margin-right: 10px;
              
              text {
                font-size: 14px;
                color: #38a688;
              }
            }
          }
        }
      }
      
      // 加载更多
      .load-more {
        display: flex;
        justify-content: center;
        padding: 15px 0;
        
        .load-text {
          font-size: 14px;
          color: #38a688;
          padding: 8px 20px;
          border: 1px solid rgba(56, 166, 136, 0.3);
          border-radius: 20px;
        }
      }
      
      .load-all {
        display: flex;
        justify-content: center;
        padding: 15px 0;
        
        text {
          font-size: 14px;
          color: #bcaaa4;
        }
      }
    }
  }
}
</style> 